npm install -g create-react-app
Create a project named react-chat
create-react-app react-chat
Run a project named react-chat
cd react-chat
yarn start
# or
npm start
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<h1 className='App-title'>Welcome to React</h1>
</header>
<p className='App-intro'>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
public/
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js
const ComponentName = () => {
return (
<div a={1}>
Some text
</div>
);
};
class ComponentName extends React.Component {
render() {
return (
<div a={1}>
Some text
</div>
);
}
}
React.createElement('div', {a: 1}, 'Some text')
class Title extends React.Component {
render() {
return (
<h1>
Some title
</h1>
);
}
}
<h1>
Some title
</h1>
class Header extends React.Component {
render() {
return (
<header>
<Title />
</header>
);
}
}
<header>
<h1>
Some Text
</h1>
</header>
import './App.css';
const Message = () => {
return (
// insert code here
);
};
class App extends Component {
const Message = () => {
return (
<div>
Some text
</div>
);
};
class App extends Component {
render() {
return (
<div className='App'>
// previous code
</header>
// insert code here
<div>
);
}
}
class App extends Component {
render() {
return (
<div className='App'>
// previous code
</header>
<Message />
<div>
);
}
}