npx create-react-app my-app cd my-app npm start # Start the development server 

import React from 'react'; const MyComponent = () => { return <div>Hello, React!</div>; }; export default MyComponent; 

import React, { Component } from 'react'; class MyComponent extends Component { render() { return <div>Hello, React!</div>; } } export default MyComponent; 

const element = <h1>Hello, world!</h1>;

const name = 'React'; const element = <h1>Hello, {name}!</h1>;

const MyComponent = ({ title }) => <h1>{title}</h1>; <MyComponent title="Welcome to React!" />

import React, { useState } from 'react'; const MyComponent = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 

import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } export default MyComponent; 

import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { document.title = 'Hello, React!'; }, []); // Runs only once (componentDidMount) return <div>Hello, React!</div>; }; export default MyComponent; 

const handleClick = () => { alert('Button clicked!'); }; <button onClick={handleClick}>Click me</button> 

const MyComponent = ({ isLoggedIn }) => ( <div> {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>} </div> ); 

const items = ['Apple', 'Banana', 'Cherry']; const List = () => ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); 

import React, { useState } from 'react'; const MyForm = () => { const [value, setValue] = useState(''); const handleSubmit = (e) => { e.preventDefault(); console.log(value); }; return ( <form onSubmit={handleSubmit}> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <button type="submit">Submit</button> </form> ); }; export default MyForm; 

import React, { useState } from 'react'; const MyContext = React.createContext(); const MyProvider = ({ children }) => { const [value, setValue] = useState('default'); return ( <MyContext.Provider value={{ value, setValue }}> {children} </MyContext.Provider> ); }; export { MyContext, MyProvider }; 

npm install react-router-dom

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; const App = () => ( <Router> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Switch> </Router> ); export default App; 

npm start # Start the development server npm run build # Build for production npm test # Run tests