joppot

コピペで絶対動く。説明を妥協しない

プログラミング

React Project development environment building command create-react-app is too convenient

投稿日:



Abstract

Hello everyone It’s me candle.
In this time we will build a “react” development environment with create-react-app command and try to hello world.
Past react development was created by installing babel and other packages from npm on your own using gulp or webpack.
Past react development installed babel and other packages from npm and built servers with gulp and webpack.
If you use the create-react-app command, you can create react environment easily.
Let’s do it.


Precondition

Node is already installed


Installing the create-react-app command

You can install the create-react-app command from npm.
We will use this command in the computer as a whole, so we install it with -g flag.

npm install -g create-react-app

Create react project

We start to create react project with create-react-app.
This is the general making method.

create-react-app projet_name_here

Let’s create helloworld project in this time.
It is ok the location of the directory anywhere. I make it on the desktop for ease of explanation.

create-react-app helloworld

After installing you move to the project.

cd helloworld
ls


Launching the server

When you move to the project, start the server with npm start.

npm start

A message like this appears

It will be successful if the browser opens and the following page appears.

Writing hello world program

Let’s do it as a first practice.

  1. Create a src/components/Input.js componet
  2. Edit src/App.js

Create src/components/Input.js component

At first let’s create the Input.js component.
We do not have the components folder yet in the src folder.
We make the components folder and Input.js

mkdir src/components
touch src/components/Input.js

Open the src/components/Input.js and write it.

import React from 'react';

const Input = (props) => <input name={props.name} type={props.type} onChange={props.onChange} />

Input.propTypes = {
  onChange: React.PropTypes.func,
  name: React.PropTypes.string,
  type: React.PropTypes.string
}

Input.defaultProps ={
  name: '',
  type: 'text'
}

module.exports = Input;

Save it.

Rewrite src/App.js

The main program of react is src/App.js. Open it with your favorite editor.

emacs src/App.js

Rewrite like this code.

import React from 'react';
import Input from './components/Input'

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'hello world'
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <Input onChange={this.update.bind(this)} />
      </div>
    )
  }
}

export default App;

Save it.

Check it in the browser

Access http://localhost:3000 in the browser.
You write character in the text field, the text of “hello world” will be overwritten.


Conclusion

Until now React programmers were building the environment in various ways, but it seems that this is the one of best practice.

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

Hiragino Sans How to write to change weight in css

Abstract Hello everyone it’s me candle. In this time I will show you how to write css of Hiragino Sans.The feature of Hiragino Sans is to be able to change the weight of font from 1 to 9 levels. On the other hand, there are various ways of writing css of Hiragino Sans and I did not know exactly how to write it, so I wrote a program and test it. It will help you who will use Hiragino Sans. The quick reference is released here. http://hiragino.joppot.info Condition Nothing SPONSORED LINK How to write css of Hiragino Sans From the …

Customize wordpress bogo plugin’s short code

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to customize wordpress bogo short code. The items to introduce are these. The flag display or hide Change the text Related article How to change the language form “en-US” to “en” by wordpres bogo Precondition WordPress bogo has been installed You can edit the theme of wordpress

Use react-simple-format in React web

Abstract Hello everyone it’s me candle. In this article we will use simple-format in react. Simple format is famous for Ruby on Rails and is commonly used. React has a legacy react-simple-format and 16g’s made. The legacy lib is not useful, so I choose 16g’s made. https://github.com/16g/react-simple-format Condition Nothing Create project If you already have a React project please use it. If not, use the following command to create it. create-react-app simple_format_sample cd simple_format_sample How to use react-simple-format First install it. yarn add @16g/react-simple-format Open a appropriate component file. I write it in src/App.js. import React, { Component } from …

Create plantUML with emacs using plantuml-mode

Autumn leaves on wood table Abstract Hello everyone it’s me candle. In this time, we will introduce plantuml-mode of emacs supporting plantUML. plantuml-mode has three functions. Syntax highlight Autocomplete Display UML preview There are plenty of settings, so let’s do it patiently. Precondition You had plantuml command I installed plantuml with brew. but it is ok you prepare jar file. If you don’t have it yet, please refer to here. Build PlantUML environment on Mac using brew Install plantuml-mode The latest version of plant-mode is not yet registered in el-get packages, so we will get it from github directly. For …

Create the simplest drop down menu in React

Abstract Hello everyone it’s me candle. In this time we will make a most simple drop down menu. Condition Knowledge of react Preparation We create a react project with the below command. create-react-app hello-menu Open src/App.js and write this. import React, { Component } from 'react' class App extends Component { render() { return ( <div> <p>hello menu</p> </div> ) } } export default App Create a components directory in the src directory. mkdir src/components Create a DropDownMenu.js file in the src/components directory. touch src/components/DropDownMenu.js Now on ready. Create a Drop down menu Open the src/components/DropDownMenu.js and write these. import …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.