-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nick - React: The Basics #21
Comments
КонцепцииReact - декларативный, основанный на компонентах UI-фреймворк для JavaScript. function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
} или ES6-классов (у которых имеются некоторые дополнительные возможности), которые населедуют от класса class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
} У каждого компонента в React есть:
Как вы могли заметить, методы ReactDOM.render(
<App />,
document.getElementById('root')
); ТребованияЧтобы начать работу с React, нужно:
|
Лера, проверь грамматику и можно публиковать |
Concepts
React is a declarative, component-based JavaScript UI-framework.
React’s core concept is that you page consists of a number of independent components, each with its own state and an array of methods. Components can be defined via JS functions:
or ES6 classes (which have some additional features), that extend the
React.Component
class:Every React component has:
props
object that contains a set of input parameters that are passed to the component through attributes:props
object is read-only, meaning all React components must act like pure functions with respect to their props.state
object, which is local, private and fully controlled by the component and represents the component's state. The only place where you can directly assign thestate
is the component's constructor. Component'ssetState()
method should be used in all other cases. Changing the state viasetState()
also causes the component to re-render itself, which is the preferred way to update the view.render()
method that allows you to render the component on a page.Note:
render()
should always return a single root element.As you could notice, the
render()
methods we used as an example returned a strange HTML-looking thing. This is JSX - a JS syntax extension. JSX can be split into multiple lines, and you can also embed JS expressions in it by wrapping them in singular curly braces. You can create normal HTML using JSX, as well as use any of the components that you've already declared. Any JSX object itself is also a JS expression, therefore it can be assigned to a variable, concatenated with another JSX object, etc.Note: since JSX is closer to JS than to HTML, the
camelCase
attribute naming convention is used, e.g.className
instead ofclass
.Finally, ReactDOM has its own
render()
method that renders one of your components into an existing element on the page:Requirements
To start working with React you will need to:
npm install react react-dom
) or Yarn (yarn add react react-dom
); thereact
andreact-dom
npm packages also provide single-file distributions in dist folders, which are hosted on a CDN:create-react-app
is also a good way to get started with a new React app, which allows you to create the initial structure for your future application and to optimize your app for production later:The text was updated successfully, but these errors were encountered: