За сколько можно выучить react

За сколько можно выучить react js?

Вопрос, точнее сказать не сказать такой. Вот много вижу мнений по разным форумам, что мол кто-то считает что реакт нужно сразу учить, кто-то считает что нужно ванильный js учить, кто то считает что нативный js ничто а фрейворки всё. Моё же мнение субъективно такое, что нативный js нужно знать очень хорошо, и понимать его суть и концепцию, тогда и любой фреймворк будет по зубам выучить за небольшой промежуток времени. Интересно мнение остальных людей кто понимает о чём я..

Голосование за лучший ответ
Без самого JS, ты никогда не поймёшь React

Любой фреймворк или библиотека это не магия и не новый язык программирования, а лишь доп инструмент.

Без хорошего понимания самого языка, будет сложно осваивать React и любой другой инструмент, те кто говорят что не нужно учить JavaScript чтобы работатьс реактом, они сами никогда не занимались более серьезной разработкой, они просто проходили курсы где их учили по принципу «повторяй за мной и будешь зарабатывать как я миллионы» и тепеь везде пропагандируют свою философию.

А толку от библиотеки без знания самого языка? Да и самого языка недостаточно, нужно владеть какой-никакой математикой, понимать алгоритмы и структуры данных

Сколько времени нужно, чтобы выучить JavaScript

Один из самых распространенных вопросов, который задают начинающие программисты: за сколько можно выучить JavaScript с нуля. В сегодняшней статье постараемся подробно ответить на этот вопрос.

JavaScript – язык программирования, используемый при разработке веб-страниц, он тесно связан с HyperText Markup Language (HTML) и Cascading Style Sheets (CSS). JS позволяет разработчикам динамически изменять макет и внешний вид сайтов, он также используется на стороне сервера. Подробнее про этот язык программирования мы писали здесь.

Как долго учить JS?

Ваш опыт имеет большое значение. Например, если вы знаете C#, то, скорее всего, изучение JavaScript займет у вас не больше двух недель. Это связано с тем, что все языки программирования довольно похожи, поэтому второй и третий язык даются гораздо проще. Если вы изучали информатику и математику в университете, вам легче будет изучить JS. У вас уже есть некоторые навыки в HTML и CSS? Тогда вы быстрее поймете основы JavaScript, так как JS напрямую взаимодействует с элементами, которые создаются на этих языках. Если же вы новичок, обучение займет в разы больше времени, но это не значит, что у вас не получится выучить JavaScript с нуля.

Зачем вам JS?

Когда вы говорите, что хотите выучить JavaScript, что имеете в виду? Вам этот язык нужен для трудоустройства? Чтобы знать второй язык программирования? Или создать проект на основе JS? А может вы хотите найти новое хобби? Лучше как можно подробнее ответить на эти вопросы. Ответы помогут составить план обучения и двигаться по нему дальше.

Как изучать JavaScript?

В интернете можно найти огромное количество учебных ресурсов по JavaScript: книги, видео, платформы и т.д. Выберите удобный для себя формат. Подробнее о том, какие источники рекомендуем для изучения JavaScript мы рассказали здесь. В первую очередь важно изучить следующие темы: – Структура HTML документа, блочная модель, основные теги. Выбор формата для изображения. – Семантическая разметка, доступность и SEO. – Работа с формами, взаимодействие с сервером. – CSS стилизация страниц: селекторы и приоритет применения, позиционирование, работа с сетками (flexbox, grid). – Адаптивная верстка: Media queries, подход mobile first. – Организация стилей на проекте, БЭМ методология. – Продвинутые техники CSS: Стилизация псевдоэлементов, анимации, тени и градиенты. – Анимания, трансформации и фильтры на CSS. – Базовые взаимодействия JavaScript со страницей, обработка событий. Подключение внешних модулей. – Инструменты разработки: Использование препроцессора, минификация кода, npm, webpack. В среднем, на изучение всех этих тем уходит 2 месяца учебы по 5 часов в день. Это – основы, после которых стоит переходить к JavaScript Core. Все необходимые темы из этого раздела можно посмотреть в нашей программе обучения. На JavaScript Core уходит примерно такое же количество времени: 2 месяца, при ежедневных занятиях по 5 часов в день. Итого: 4 месяца уйдет на изучение основ JS. Нужно ли учить фреймворки JS? Да, безусловно, они упрощают разработку и помогают создавать объемные приложения, интересные проекты и даже работать на серверной стороне. Мы рекомендуем начать с React JS. На его изучение уйдет примерно 2 месяца. Так, нужно минимум 6 месяцев, чтобы изучить основные моменты в JS-разработке. В случае, если вы рассчитываете трудоустроиться JS-разработчиком, нужно иметь практический опыт работы в коммерческом проекте. В среднем, на участие в командном проекте потребуется не меньше месяца. Так, на подготовку к трудоустройству уйдет 2-3 месяца. Итак, сколько времени нужно, чтоб выучить JavaScript? Получается, чтобы с нуля трудоустроиться JS-разработчиком нужно минимум 8-9 месяцев. Конечно, это средний показатель. Он может быть меньше или больше, в зависимости от вашей скорости обучения.

Читать еще:

Сообщества разработчиков — обзор популярных

Какие сообщества полезны для начинающих программистов. Смотрите подборку комьюнити разработчиков в блоге Kata Academy.

Всем Привет

Эта статья немного длинная, но поверьте мне, после ее прочтения- вы научитесь React JS верным путем. Не так как я.

Често говоря, я потерял много времени на поиски самых лучших ресурсов. Я просмотрел тонны видео на Youtue и ни одно из них не закончил, потому-то не понимал фундаментальных основ (Checklist) для React JS.

В этой статье я расскажу вам о том, как я выучил React JS зная только Vanilla Java Script, HTML, CSS, JAVASCRIPT (начальный уровень), а так же без знаний каких-либо FrontEnd Фреймворков (Angular, Vue, и.т.д)

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

ChekList (Базовые знания):

Запомните, что этот лист знать необходимо, убедитесь в том что вы прошли все темы для того что-бы понять любое React JS обучающее видео.

Сохраните эту статью- она вам понадобиться.
HTML, CSS, and Javascript (Баовые зания).
Некоторые ES6 концепты Javascripе — 1. Стрелочные Функуии (Arrow Functions) 2. Let и Const 3. Кламмы и “This ”(Class and ‘this’ keyword)
Node.js (Базовые знания). Вам не нужно знать Node.js идеально, просто сконцентрируйесть на основных понятиях о которых я расскажу позже
VSC или другой редактор исходного кода.

HTML, CSS, JAVASCRIPT

Пропустите эту секцию если вы знакомы с основными концертами HTML, CSS и JavaScript.

Эти 3 основы для frontend веб разработки;
Они работают вместе и создают полностью функциональные веб приложения/ веб сайты;
Рассматривайте человеческое тело;
HTML — Отвечает за структуру “Скелет”, обозначает семантику- смысловую разметку веб страницы;
CSS — Отвечает за стиль “Плоть, Кожа”, обозначает как отдельный сегмент должен выглядеть — например каким должен быть цвет, высота, ширина и.т.д;
JS — Отвечает за функциональность “Мозг” н совсем мозг, но та часть мозга которая говорит какой части что делать.

Я думаю этого достаточно чтобы понимать как HTML, CSS, и Javascript работает вместе что-бы создать веб приложение или вебсайт;

Ресурсы для Html, CSS, Js:

Если вы предпочитаете больше читать, чем учить, то W3SCHOOLS это идеальное место для начала вашего пути;
Если вам нравится изучать технологии просматривая видео-туториал, то TRAVERSY MEDIA предлагает курс Web development for absolute beginners;
Для Javascript обратите вниванеи на это видео-туториал FREECODECAMP;
А для тех кто хотел бы освежить свои знания по Javascript посмотрите этот 7-ми минутный туториал seven minutes javascript tutorial.
А так же повтор Javascript от MND

Некоторые ES6 концепты Javascript

Стрелочная функция, Let и Const, Классы и ‘this’:

Javascript в нашем браузере постоянно меняется, ES6 или ECMAScript 2015, если я скажу простыми словами, это просто еще одна версия javascript.
В ES6 появилось много новых функций, но сейчас, чтобы начать работать с React, нам просто нужно знать о функциях со стрелками, Let и Const, Классы и ключевом слове “this”.

Стрелочная Функция:
() => <>

Стрелочные функции позволяют нам писать более короткий синтаксис функции. Проверьте фрагмент ниже, чтобы понять лучше.

//Как было:
function greet()
 console.log(‘Hello’);
>
var greet1 = function() console.log(‘hello’);
>//ES6:var greet2 = () => console.log(‘hello’);
>

Посмотрите это видео (0:56 секунд) или прочитайте об этом в W3SCHOOLS.

Let и Const:

Let — используется для определения локальной переменной, ограничивающей их область блоком, в котором они объявлены.
Const — используется для определения постоянной переменной, значения которой нельзя изменить.

Посмотрите этот ресурс для более лучшего понимания.
Далее…

Классы и ‘this’:

Концепции объектно-ориентированного программирования, такие как- класс, метод, объекты, были введены в ES6.
Объекты классов похожи на те классы и объекты, которые мы изучали на других языках, таких как C ++, Java.

Посмотрите это короткое видео-туториал написанным Hitesh Choudhary для лучшего понимания.

Теперь давайте поговорим об этом ключевом слове “this”
This — ключевое слово представляет текущий выполняемый объект.

Настоятельно рекомендуется твердое понимание ключевого слова “this”, а также узнать, что такое Bind (используется для привязки / соединения ключевого слова “this” с объектом).

Чтобы узнать больше о ключевых словах “this” и методах “Call, Bind”, следуйте этой статье Sukhjinder Arora.

Node.js:

Основы JS для понимания кода React JS.

Что такое Node JS? (простым языком)
Node — это среда для Javascript, это не язык программирования, у каждого браузера есть движок javascript, например, у chrome есть движок V8, у Mozilla firefox есть SpiderMonkey, у Microsoft Edge есть Chakra, эти движки встроены в браузеры, они не могут выполнять какие-либо операции вне браузера как файловые операции, операции ОС, сетевые операции, чтобы преодолеть этот существует Node.js Двигатель V8 встроен в Node Js. так что в основном Node — это движок Javascript, который может выполнять операции с файлами, ОС.

Хорошо, теперь, все особенности Node, которые вы должны знать, чтобы изучить React:

1. NPM(Node Package Manager) Это менеджер пакетов для установки модулей и пакетов внешних узлов в ваш проект, как PIP для Python.

2. Ключевые слова IMPORT и EXPORT.

//user.jsconst getName = () => return ‘Jim’;
>;const getLocation = () => return ‘Munich’;
>;const dateOfBirth = ’12.01.1982';exports.getName = getName;
exports.getLocation = getLocation;//index.jsconst user = require(‘./user’);
console.log( 
`$ lives in $ and was born on $.`
);/* * здесь будут доступны только экспортированный метод и переменная ‘user.dateOfBirth’ не будет извлечен из user.js, поскольку он не был экспортирован. * / 
*/

Посмотрите это видео, чтобы понять, как работает экспорт в Node.

Этих двух вышеупомянутых концепции Node Js будет достаточно для начала работы с React JS.

Посмотрите это видео-туториал от MOSH для лучшего понимания NODE JS.

Редакторы исходного кода:

Лучший выбор редактора кода очень помогает при разработке.
Для веб-разработки наиболее рекомендуемые редакторы кода:
1. Visual Studio Code — VSCODE — Настоятельно рекомендуется.

React JS

Теперь давайте поговорим о React и о том, чему научиться в первую очередь.

React — это библиотека Javascript, разработанная Facebook для создания интерактивных пользовательских интерфейсов.

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

Топики для изучения React JS?

Компонентная архитектура (уже сделано).
State
Props
Functional Components (Функциональные Компоненты) , Class Components (Классические Компоненты).
Styling(CSS) in React.
React Routing.

это основные понятия React, после того как вы завершите их, вы начнете чувствовать себя более уверенно работая с React.

State and Props ( на простом языке):

State — Проще говоря, «состояние» содержит синхронные переменные, как будто вы изменяете значение переменной состояния, тогда это изменение стразу отражается во всех местах, где используется данная переменная.

Props — это как аргументы, передаваемые в функцию или метод, здесь (аргументы) передаются в тег HTML как входной аргумент.
Следуйте нижеприведенному видео-ресурсу, чтобы узнать все другие основные концепции React JS.

Уф! Это почти все, что вам необходимо для начального понимания React JS, а остальное все зависит от вас, ребята. Happy Hacking!!

Ссылки быстрого доступа:

HTML, CSS —Читать | Смотреть
Javascript —Смотреть
Seven minutes javascript tutorial
Стрелочные функуии —Читать | Смотреть
Let и Const —Читать
Класс в ES6 —Смотреть
‘this’ —Читать
‘Export’ метод —Смотреть
Node Js за 1 час —Смотреть
React Js для начиняющих —Смотреть
React Js Crash Course (Building ToDo app) —Смотреть
Udemy курс React — The Complete Guide (incl Hooks, React Router, Redux) — Смотреть

Заключение:

Спасибо, что прочитали эту статью, я надеюсь, что вы найдете ее полезной, это все об обучении и обмене, я сделал свою часть и надеюсь, что вы делаете то же самое, поделитесь этой статьей с друзьями, которые также пытаются начать работать с React JS для веб-разработки.

Хотите выучить React, но не знаете с чего начать? Вот, что вам нужно знать

React — это бесплатная внешняя библиотека JavaScript с открытым исходным кодом для создания сложных пользовательских интерфейсов путем разделения приложения на более мелкие компоненты. Он поддерживается Facebook и сообществом разработчиков.

Предпосылки для изучения React

Прежде чем изучать React, мы бы посоветовали ознакомиться с HTML, CSS и JavaScript. Вы можете изучить HTML и CSS в течение 2-3 недель, поскольку они используются для создания макетов для веб-приложений. На освоение JavaScript требуется время, поскольку это язык программирования. Потратьте как минимум месяц или два на изучение JavaScript. Нужно не просто учиться, но и все время практиковаться, создавая небольшие проекты для реализации полученных знаний. Вы можете создавать мини-проекты, такие как списки дел , калькулятор , генератор случайных шуток и т. д.

JavaScript

Изучая JavaScript, вы должны избегать некоторых ошибок. Часто новички, когда изучают JavaScript, я думают, что они должны стать абсолютными мастерами JavaScript, чтобы писать код React (что бессмысленно). Изучая продвинутые концепции (как новичок), и потерпев неудачу, могут подумать, что недостаточно хороши. Но, как новичку вам нужно выучить ровно столько, чтобы вы могли создавать базовые проекты на ванильном JavaScript. Некоторые темы для изучения и глубокого понимания:

Переменные
Условия if / else и операторы переключения
Разница между var, let и const
Функции
Массивы
Методы массива, такие как filter , map , reduce и т. д.
Концепции ES6
Promises
Обратные вызовы
Концепции классов и ООП
Работа с API

Опять же, не просто учите, ПРИМЕНЯЙТЕ .

React

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

React Docs очень хорошо написаны, охватывая основы React. Изучите эти темы очень хорошо, чтобы понять React фундаментально.

JSX
Компоненты (функциональные и классовые)
Методы жизненного цикла
Состояние
Обработка событий
Формы
Условный рендеринг
Работа со сторонними API.

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

React Router

Узнайте о маршрутизаторе React. React router — это библиотека маршрутизации для React, которая поможет вам перемещаться по различным страницам в вашем приложении. Узнайте о загрузке содержимого конкретной страницы, передаче параметров в URL-адресе, перенаправлении и т. д. Кроме того, поймите, что маршрутизатор не является частью React, это библиотека маршрутизации, созданная для React.

Продвинутый React

Теперь, когда у вас есть базовые знания React, а также созданы некоторые базовые проекты, пришло время изучить некоторые продвинутые концепции, такие как хуки , контекст и т. д. Взгляните на React Docs и изучите эти концепции.

Контекст
Хуки
Границы ошибок
Компоненты высшего порядка
Разделение кода
Ссылки
Пересылка ссылок
Рендеринг реквизита

Дополнительно

Вы можете изучить некоторые дополнительные библиотеки , как Material UI , reactstrap , tailwindcss , Semantic UI и т.д. Эти библиотеки помогут вам в повседневной работе React Dev. Однако не обязательно изучать все, вы можете попробовать изучить их, когда закончите с основами React и сможете создавать проекты.

Поздравляем

Вы разработчик React. Теперь вам просто нужно отточить свои навыки, создавая проекты, часто посещая React Docs и узнавая что-то новое.

Зарегистрируйтесь на Портале

и получите красивый адрес своей странички вида: senior.ua/sergey.ivanov

icon

senior.ua/ |

Потом все адреса будут Заняты 🙁

За сколько можно выучить react