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 *

関連記事

Deploy React to s3 with aws command

Abstract Hello veryone it’s me candle. In this time I will show you how to deploy a react project created by create-react-app to S3. A good thing about React web app is that you can publish the products created by building them as long as you upload them such as html and js files and images to storage. In this article I don’t write these three items. How to get a IAM that can access to S3 Allocate your own domain using Route53 SSL connection of React web app Condition You have aws command Please install the aws command in …

Using sphinx how to generate documents of python classes and functions

Abstruct Hello everyone it’s me candle. In this article I will explain how to make documents about classes and functions with Sphinx automatically. condition I will explain it using Python 3, but I think that it will probably work with python 2 as well. Prepare test files Create a main.py and dog.py. touch main.py dog.py Write this to the main.py from dog import Dog def main(): dog = Dog() dog.show_name() if __name__ == "__main__": main() Open the dog.py and write it. class Dog(object): def __init__(self, name="bob"): self.name = name def bark(): print("Bow Wow") def show_name(self): print(self.name) def get_name(self): return self.name …

I created docker shortcut command with bash alias

Abstract Hello everyone it’s me candle. I will introduce easy operation of the docker command. Of course, I just created it thinking that it was useful, so please change it for much more useful. Precondition You use bash. ( Even though you use zsh or csh or something else, you edit a bit, it will work well) You use docker

How to change the language form “en-US” to “en” by wordpres bogo

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you to customize bogo plugins. The bogo is wonderful plugin which can adapt the wordpress site to many languages as a simple. but, there is a problem that you can’t choose general English. When writing English articles, you may not always have to write it limited to country. However, you can choose ‘en-UK’, ‘en-CA’ and ‘en-US’, but ‘en’ can not be chosen in bogo. I checked the source code. The bogo got a language list from wordpress function, and there is no general English in it. …

4 functions of scikit-learn preprocesses data such as machine learning

Abstract Hello every one this is candle. In this time we will prreprocess a data with scikit-learn which is machine learning library of python. We will use scikit-learn called With scikit-learn you can use what is called a converter, and you can convert the input data with fit_transform () method.Since there are many converters, I will introduce the following four converters that are often used in machine learning. Imputer StandardScaler MinMaxScaler OneHotEncorder Condition Python3 scikit-learn 0.19.1 For running sample code, you need numpy aside from these libs.


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.