Блог ReactJs — тот, что с одним файлом HTML

Привет, ребята, это мой первый блог, и сегодня я собираюсь написать о ReactJs и создать очень простое приложение с подробным объяснением каждого шага и каждого бита кода.

Если вам трудно понять что-то из этого руководства или React в целом, оставьте комментарий, и я постараюсь помочь, чем смогу.

Для кого этот блог???

(Я начал со многих блогов и позже пришел к выводу, что хорошо, босс, это не моя чашка чая). Так что, если вы не хотите тратить свое время впустую, прочитайте строку ниже.

Любой, кто знает JS и HTML и может писать даже на базовом языке JS и HTML. (Попытаюсь предположить, что читатель, как и я, ничего не знал о React и мало знал о JS и был брошен в яму, чтобы сражаться с могущественным React Framework.)

Примечание. Это очень простой пример, который поможет новичкам начать свое путешествие в React.

Что вам нужно заранее, чтобы запустить этот проект/учебник.

Браузер (желательно Chrome).
Текстовый редактор

Таким образом, React — это всего лишь часть View в структуре MVC. Существуют различные технологии, которые могут предоставить вам модель и бит контроллера, но для этого урока это выходит за рамки.

Для этого урока у нас будет только один файл HTML.

Создайте папку My_first_React, в этой папке создайте файл TODO.html

Начнем с простого приветствия, мир.

Вставьте приведенный ниже код в только что созданный HTML-код.

<!DOCTYPE html>
<html>
 <head>
 <meta charset=”UTF-8" />
 <title>Hello React!</title>
 <script src=”https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
 <script src=”https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
 <script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
 </head>
 <body>
 <div id=”example”></div>
 <script type=”text/babel”>
ReactDOM.render(
 <h1>Hello World</h1>,
 document.getElementById(‘example’)
 );
 </script>
 </body>
</html>

Так что только что произошло???

Если все пошли писать, вы, должно быть, видите большой Hello World на своем экране.

Итак, выше у нас есть обычный HTML-файл со всеми общими тегами. Давайте посмотрим на основной

<script src=”https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script> 
<script src=”https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script> 
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

Первый импортирует код ReactJs, второй импортирует ReactDOM (React когда-то был разделен на React и ReactDOM), а последний — Babel (сейчас объясню, что это такое).

<script type=”text/babel”> 
 ReactDOM.render( 
 <h1>Hello World</h1>, 
 document.getElementByID(‘example’) 
 ); 
</script>

Здесь происходит главная МАГИЯ

Как видите, мы используем HTML (JSX) внутри тега script, где должен быть написан JS. Так как это работает??

Здесь в игру вступает Вавилон. Babel делает много вещей (которые выходят за рамки этого руководства), но все, что вам нужно знать, это то, что он преобразует HTML или JSX в код JS, который затем отображается в элементе div с идентификатором example. (чтобы узнать, как выглядит этот JSX в JS-форме, перейдите по ссылке https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Creact&code=%3Ch1%3Ehello%20world%3C%2Fh1%3E ).

Давайте теперь разобьем наш код на компонент React, так как будет сложно написать весь код в этой функции ReactDOM.

Создайте новый компонент с именем Hello.

<script type=”text/babel”> 
 
 
 var Hello = React.createClass({ 
 render: function() { 
 return( 
 <h1> Hello World </h1> 
 ); 
 } 
 }); 
 
 
 ReactDOM.render( 
 <Hello />, 
 document.getElementById(‘example’) 
 ); 
 
 
</script>

React.createClass используется для создания компонента, который должен иметь один метод рендеринга, возвращающий JSX. Если вы откроете это в своем браузере, вы увидите Hello World.

Теперь позвольте мне объяснить две основные вещи в React, а именно реквизиты и состояние.

реквизиты: реквизиты — это в основном данные, которые родитель передает своему дочернему элементу.

ОЧЕНЬ ОЧЕНЬ ВАЖНОПРИМЕЧАНИЕ, которое нужно знать, это то, что PROPS НЕИЗМЕНИМЫ, то есть реквизиты не должны изменяться, вы не должны редактировать реквизиты или модифицировать их каким-либо образом, они похожи на константы. НЕ МЕНЯЙТЕ, ПОВТОРЯЮ, НЕ МУТИРУЙТЕ РЕКВИЗИТ. Итак, вы, должно быть, думаете, что мне делать, когда мне нужно изменить или видоизменить какое-то значение в свойствах. Здесь на сцену выходит состояние.

состояние:состояние — это не что иное, как данные, локальные для компонента, которыми он может манипулировать, изменять или делать все, что ему заблагорассудится. Таким образом, чтобы изменить данные в свойствах, вы копируете их или добавляете в состояние, а затем используете в любой форме.

пример:

<script type=”text/babel”> 
 
 var Hello = React.createClass({ 
 getInitialState: function() { 
 return({ 
 ‘author’: ‘shashank’ 
 }); 
 }, 
 
 
 render: function() { 
 return( 
 <h1> {this.props.code} </h1> 
 <h2> {this.state.author} </h2> 
 ); 
 } 
 }); 
 
 
 ReactDOM.render( 
 <Hello code={‘my first react code’} />, 
 document.getElementById(‘example’) 
 ); 
 
</script>

Объекты должны быть переданы в компонент Hello, вы можете передать столько реквизитов, сколько захотите, все они будут доступны в объекте this.props в этом компоненте. Не беспокойтесь об этом методе getInitialState, он будет объяснен чуть позже.

Запустите этот код. Вы ничего не увидите на экране.

Откройте консоль, там увидите ошибку.

Это означает, что если у вас есть более одного тега HTML/JSX, они должны быть заключены в один родительский тег HTML/JSX. (Помните, что это выглядит как HTML, но на самом деле это JSX) (это очень распространенная ошибка React)

Оберните теги h1 и h2 в один тег div и откройте его в браузере. Вы увидите что-то вроде этого.

Переходя к этому методу getInitialState. В React есть много методов жизненного цикла,getInitialState — один из таких методов. (Для тех, кто не знает, что такое методы жизненного цикла, это в основном методы, которые вызываются на разных этапах этого Компонента, когда он вызывается, например, метод инициализации или метод уничтожения и т. д.)

В React есть много методов жизненного цикла, но вы должны знать о четырех основных, т.е.

получить исходное состояние
КомпонентВиллМаунт.
компонентдидмаунт
компонентWillUnmount

Они запускаются в том порядке, в котором они перечислены, и работают, как следует из названия, например, componentWillMount вызывается непосредственно перед монтированием компонента, а componentDidMount запускается сразу после монтирования компонента (под монтированием подразумевается DOM, этот тег div «пример»).

Если вы понимаете концепцию состояния, реквизита и методов жизненного цикла, вы почти закончили с React, остальное — это просто привыкнуть к синтаксису и нескольким второстепенным вещам.

Изучив основы, давайте углубимся в React, создав простое приложение TODO с функциями добавления и удаления.

Обратите внимание.

Код будет написан в синтаксисе ES5. В конце этого руководства будет один файл со всем кодом в ES6. (Для тех, кто не знает, что такое ES5 и ES6 с точки зрения непрофессионала, есть разница в синтаксисе того, как вы пишете код).

Давайте начнем с создания компонента TODO с простым тегом ввода, с помощью которого вы сможете вводить свои задачи.

<script type=”text/babel”> 
 
 
 var TODO = React.createClass({ 
 
 
 getInitialState: function() { 
 return ({ 
 ‘TODOS’: [] 
 }); 
 }, 
 
 
 render: function() { 
 return ( 
 <div> 
 Add a todo: <input type=”text” name=”todo” ref=”todo” /><input type=”submit” value=”submit” /> 
 </div> 
 ); 
 } 
 }); 
 
 
 ReactDOM.render( 
 <TODO />, 
 document.getElementById(‘example’) 
 ); 
 
 
</script>

вы увидите что-то вроде этого.

Вы заметили, что есть атрибут «ref», не задавайтесь вопросом, что это за атрибут, это HTML 5 или HTML 4, потому что это не один из них. Это специальный атрибут, предоставляемый React для простого извлечения элемента DOM. Мы скоро увидим пример.

Также у нас есть TODOS, массив, в котором мы будем хранить наши TODO (в состоянии нашего компонента)

Когда вы вводите свою задачу и нажимаете «Отправить», ничего не происходит. Не волнуйтесь, мы еще не добавили эту функцию!

Давайте продолжим и добавим это.

Что мы сделаем, так это вызовем функцию onClick, которая получит это значение и вставит его в массив TODOS, который мы только что создали.

<script type=”text/babel”>
var index = 0;
var TODO = React.createClass({
getInitialState: function() { 
 return ({ 
 ‘TODOS’: [] 
 }); 
 },
addTODO: function() { 
 var TODOItem = this.refs.todo.value; 
 if(TODOItem.length != 0) { 
 var temparr = this.state.TODOS.concat({'id': index++, 'todo_item': TODOItem});
 } 
 this.refs.todo.value = “”; 
 console.log(temparr); 
 },
render: function() { 
 return ( 
 <div> 
 Add a todo: <input type=”text” name=”todo” ref=”todo” /> 
 <input type=”submit” value=”submit” onClick={this.addTODO} /> 
 
 </div>
); 
 } 
 });
ReactDOM.render( 
 <TODO />, 
 document.getElementById(‘example’) 
 );
</script>

Здесь, в строке 4, мы добавили глобальную переменную с именем index, которая поможет нам назначить что-то вроде первичного ключа (в БД) или уникального идентификатора для TODO, которые вы создадите.

В строке 30 мы прикрепили событие onClick к кнопке «Отправить».

и в строке 17 мы добавили функцию addTODO, которая работает следующим образом:

с помощью ref мы получаем элемент DOM, то есть наш входной тег, и с помощью «.value» мы получаем из него значение и проверяем, не является ли оно пустым, затем мы помещаем его в массив TODOS как объект (почему как объект скоро до этого дойдет).

Откройте консоль, и каждый раз, когда вы будете вставлять новую задачу, вы увидите, что она добавляется в массив TODOS.

ПРИМЕЧАНИЕ: состояние не является постоянным, т. е. после обновления список TODO в браузере исчезнет. (Чтобы сделать его постоянным, нам нужно добавить созданные нами задачи в файл или базу данных, что выходит за рамки этого руководства).

Затем нам нужно отобразить этот список TODO в вашем браузере, давайте сделаем это.

<script type=”text/babel”>
var index = 0;
var TODO = React.createClass({
getInitialState: function() { 
 return ({ 
 ‘TODOS’: [] 
 }); 
 },
addTODO: function() { 
 var TODOItem = this.refs.todo.value; 
 if(TODOItem.length != 0) { 
 var temparr = this.state.TODOS.concat({'id': index++, 'todo_item': TODOItem});
 this.setState({TODOS: temparr}); 
 } 
 this.refs.todo.value = “”; 
 },
render: function() { 
 var todoList = this.state.TODOS.map(function(todoItem) { 
 return ( 
 <li>{todoItem.todo_item}</li> 
 ); 
 }); 
 return ( 
 <div> 
 Add a todo: <input type=”text” name=”todo” ref=”todo” /> 
 <input type=”submit” value=”submit” onClick={this.addTODO} /> 
 <ul> 
 {todoList} 
 </ul> 
 </div> 
 ); 
 } 
 });
ReactDOM.render( 
 <TODO />, 
 document.getElementById(‘example’) 
 );
</script>

то, что мы сделали, называется методом this.setState. Этот метод в основном имеет две цели: во-первых, установить состояние, а во-вторых, сообщить компоненту, что произошло изменение состояния и что компонент должен повторно отобразиться.

map — это просто простой итератор, он похож на цикл (for или while или do while и т. д.). Он принимает массив объектов, выполняет итерацию по массиву и дает вам отдельные объекты в этом массиве. (Причина, по которой мы вставили объекты в массив TODOD).

ПРИМЕЧАНИЕ. Компонент будет повторно отображаться при изменении состояния (вы должны вызвать setState, чтобы сообщить реакции об изменении состояния) и при получении реквизитов.

В браузере если вы попытаетесь что-то добавить сейчас, то оно будет добавлено.

Поздравляем, вы сделали часть добавления TODO!!!

Теперь откройте консоль, вы видите такое предупреждение.

Ну, это потому, что React назначает уникальный ключ каждому элементу при создании DOM, но здесь, когда мы используем итератор карты, мы создаем DOM, так сказать, от имени реакции, и наша задача — назначить уникальный ключ родительскому элементу, который мы визуализируем в карте.

Вот как ты это делаешь

var todoList = this.state.TODOS.map(function(todoItem) { 
 return ( 
 <li key={todoItem.id}>{todoItem.todo_item}</li> 
 ); 
 });

мы просто использовали уникальный идентификатор каждой задачи. Осмотрите элемент и перейдите к этому узлу, то есть к элементу li, который вы только что добавили, и увидите, что там будет пользовательский ключ, равный $0 ($key означает, что это пользовательский ключ)

Обновите, и теперь вы увидите, что ошибки больше нет.

Теперь давайте начнем удаление части Todo. Поскольку никто не любит делать TODO :) :p

Мы добавим крестик (X) к каждому TODO, который удалит TODO.

var todoList = this.state.TODOS.map(function(todoItem, i) { 
 return ( 
 <li key={todoItem.id}>{todoItem.todo_item} <span style={{‘color’: ‘red’}}>x</span></li> 
 ); 
 });

(Обратите внимание, что изменена только эта часть кода, остальное осталось прежним.)

Мы добавили диапазон, потому что он встроен по умолчанию и имеет цвет КРАСНЫЙ. В React стиль передается как объект, поэтому дополнительная пара фигурных скобок.

Как и раньше, мы не добавили никаких функций, поэтому нажатие на крестик ничего не даст. Давайте добавим и это.

<script type=”text/babel”> 
 
 
 var index = 0; 
 
 
 var TODO = React.createClass({ 
 
 
 getInitialState: function() { 
 return ({ 
 ‘TODOS’: [] 
 }); 
 }, 
 
 
 addTODO: function() { 
 var TODOItem = this.refs.todo.value; 
 if(TODOItem.length != 0) { 
 var temparr = this.state.TODOS.concat({'id': index++, 'todo_item': TODOItem});
 this.setState({TODOS: temparr}); 
 } 
 this.refs.todo.value = “”; 
 }, 
 
 
 removeTODO: function(id) { 
 console.log(id); 
 }, 
 
 
 render: function() { 
 var todoList = this.state.TODOS.map(function(todoItem, i) { 
 return ( 
 <li key={todoItem.id}>{todoItem.todo_item} <span onClick={this.removeTODO.bind(this, todoItem.id)} style={{‘color’: ‘red’}}>x</span></li> 
 ); 
 }.bind(this)); 
 return ( 
 <div> 
 Add a todo: <input type=”text” name=”todo” ref=”todo” /> 
 <input type=”submit” value=”submit” onClick={this.addTODO} /> 
 <ul> 
 {todoList} 
 </ul> 
 </div> 
 ); 
 } 
 }); 
 
 
 ReactDOM.render( 
 <TODO />, 
 document.getElementById(‘example’) 
 ); 
 
 
 </script>

Итак, мы добавили функцию с именем removeTODO, которая получает идентификатор (который будет индексом объекта todo, подлежащего удалению в массиве TODOS) и пока просто записывает его в консоль. Мы также добавили событие onClick в диапазон [если вы не понимаете, что такое связывание, просто проверьте его, в основном функция выходит за рамки для элементов внутри карты, поэтому мы вручную привязываем объект this для ссылки на область действия. внешнего мира карты (объем компонента TODO)]

Теперь откройте консоль, добавьте TODO и нажмите красный крестик. Вы можете видеть, что идентификатор печатается в консоли.

Теперь мы добавим функциональность для удаления TODO и повторного отображения списка.

<script type=”text/babel”>
var index = 0;
var TODO = React.createClass({
getInitialState: function() { 
 return ({ 
 ‘TODOS’: [] 
 }); 
 },
addTODO: function() { 
 var TODOItem = this.refs.todo.value; 
 if(TODOItem.length != 0) { 
 var temparr = this.state.TODOS.concat({'id': index++, 'todo_item': TODOItem});
 this.setState({TODOS: temparr}); 
 } 
 this.refs.todo.value = “”; 
 },
removeTODO: function(id) { 
   var temparr = this.state.TODOS;
       temparr.splice(id, 1);
   this.setState({TODOS: temparr});
 },
render: function() { 
 var todoList = this.state.TODOS.map(function(todoItem, i) { 
 return ( 
 <li key={todoItem.id}>{todoItem.todo_item} <span onClick={this.removeTODO.bind(this, i)} style={{‘color’: ‘red’}}>x</span></li> 
 ); 
 }.bind(this)); 
 return ( 
 <div> 
 Add a todo: <input type=”text” name=”todo” ref=”todo” /> 
 <input type=”submit” value=”submit” onClick={this.addTODO} /> 
 <ul> 
 {todoList} 
 </ul> 
 </div> 
 ); 
 } 
 });
ReactDOM.render( 
 <TODO />, 
 document.getElementById(‘example’) 
 );
</script>

В строках 27 и 28 мы удаляем TODO и setState.

С этим мы создали приложение TODO, которое мы намеревались сделать !!!!!!!

Поздравляем, теперь у вас достаточно хороших знаний о React, чтобы начать свой собственный проект, продолжайте в том же духе.

Код синтаксиса ES6:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
let index = 0;
class TODO extends React.Component {
constructor(props) {
    super(props);
    this.state = {TODOS : []};
}
addTODO() {
    let TODOItem = this.refs.todo.value;
    if(TODOItem.length != 0) {
        let temparr = this.state.TODOS.concat({'id': index++, 'todo_item': TODOItem})
        this.setState({TODOS: temparr});
    }
    this.refs.todo.value = "";
}
removeTODO(id) {
    let temparr = this.state.TODOS;
    temparr.splice(id, 1);
    this.setState({TODOS: temparr});
}
render() {
    let todoList = this.state.TODOS.map(function(todoItem, i) {
    return (
        <li key={todoItem.id}>{todoItem.todo_item} 
            <span onClick={this.removeTODO.bind(this, i)} style={{'color': 'red'}}>x</span>
        </li>
    );
}.bind(this));
return (
    <div>
        Add a todo: <input type="text" name="todo" ref="todo" />
<input type="submit" value="submit" onClick={this.addTODO.bind(this)} />
        <ul>
        {todoList}
        </ul>
    </div>
 );
}
};
ReactDOM.render(
<TODO />,
document.getElementById('example')
);
</script>
</body>
</html>

Еще больше руководств. Продолжайте проверять это место.

В качестве упражнения попробуйте добавить готовую функцию в это приложение TODO.

Блог ReactJs — тот, что с одним файлом HTML

Блог ReactJs — тот, что с одним файлом HTML

Похожие вопросы