Skip to main content

Environment

Install React​

  • Install NodeIS：go to nodejs.org and download the latest version for your operating system
  • Check version of your node to make sure you installed successfully
% node -v //檢查目前的node版本

install react

% npm i -g creact-react-app
  • Install code editor：go to Visual Studio Code and download the latest version for your operating system
  • open Visual Studio Code, open extension from left and install
  1. Simple React Snippets
  2. Prettier
  • Close Vistual Studio Code and restart the program

Create React App​

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello World!</h1>;
ReactDOM.render(element,document.getElementById('root'));

Install Bootstrap​

% npm i bootstrap
  • open index.js and include bootstrap in application
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';	//include bootstrap into our application

ReactDOM.render(<App />,document.getElementById('root'));
registerServiceWorker();

Install FontAwesome​

% npm i font-awesome
  • open index.js and include fontawesome in application
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'font-awesome/css/bootstrap.css';	//include fontawesome into our application

ReactDOM.render(<App />,document.getElementById('root'));
registerServiceWorker();

Install Visual Studio Code​

  • go to code.visualstudio.com and download the latest version for your operating system
  • Extensions -> search for : Prettier -> install
  • Manage -> Settings -> open settings (JSON)
{
  "files.associations" : {
    "*.js":"javascriptreact"	        //view all .js files as .jsx files
  },
  "editor.tabSize": 2			//change the default tab size from 4 to 2
  "editor.defaultFormatter":"esbenp.prettier-vscode",
  "editor.formatOnSave":true,		//automatic format on save
  "prettier.semi":true,			//automatic add semi colon at the end 
  "prettier.printWidth":9999,		//keep to one line
}
  • create a new folder called myapp inside Documents/React folder
  • open that folder inside VSCode
  • Ctrl+j(Win) or Cmd+j(Mac) to open terminal on VSCode
  • create a brand new react application from command line
% npx create-react-app .
% npm start